<template>
    <div class="music-player-container" :class="{ 'is-active': musicStore.currentSong }">
      <div v-if="musicStore.currentSong" class="player-content">
        <img :src="musicStore.currentSong.albumArt" alt="专辑封面" class="album-art" />
        <div class="song-info">
          <p class="song-name">{{ musicStore.currentSong.name }}</p>
          <p class="artist-name">{{ musicStore.currentSong.artist }}</p>
        </div>
        <div class="player-controls">
          <el-button :icon="DArrowLeft" @click="musicStore.prevSong" circle />
          <el-button 
            class="play-pause-btn"
            :icon="musicStore.isPlaying ? VideoPause : VideoPlay" 
            @click="musicStore.togglePlayPause" 
            circle 
            size="large"
            type="primary"
          />
          <el-button :icon="DArrowRight" @click="musicStore.nextSong" circle />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useMusicStore } from '../stores/musicStore';
  import { VideoPlay, VideoPause, DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
  
  const musicStore = useMusicStore();
  </script>
  
  <style scoped>
  .music-player-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 500px;
    max-width: 90%;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 35px 35px 0 0;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9998; /* z-index 比吉祥物低，避免遮挡 */
  }
  .music-player-container.is-active {
    transform: translateX(-50%) translateY(0);
  }
  .player-content {
    display: flex;
    align-items: center;
    padding: 10px;
    height: 100%;
  }
  .album-art {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    animation: spin 8s linear infinite;
    animation-play-state: paused; /* 默认暂停动画 */
  }
  /* 当播放时，旋转专辑封面 */
  .player-content:has(.play-pause-btn .el-icon-video-pause) .album-art {
      animation-play-state: running;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .song-info {
    flex-grow: 1;
    overflow: hidden;
    color: var(--vt-c-text-1);
  }
  .song-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  .artist-name {
    font-size: 0.8rem;
    color: var(--vt-c-text-2);
    margin: 4px 0 0 0;
  }
  .player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .play-pause-btn {
      width: 42px;
      height: 42px;
  }
  </style>